<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

		<title>课程视频页</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				width: 10rem;
			}

			.video video {
				width: 10rem;

			}


			.video {
				position: relative;
			}

			.video img {
				position: absolute;
				top: 15px;
				left: 15px;

			}

			.xuanxiang {
				position: absolute;
				top: 3px;
				left: 85%;
			}

			.biaoti h1 {
				font-size: 20px;
			}

			.biaoti {
				padding: 16px;
				padding-bottom: 20px;
				border-bottom: 0.5px solid rgb(237, 237, 237);
			}

			.kecheng {
				height: 90px;
				padding: 16px;
				position: relative;
				padding-bottom: 10px;
				border-bottom: 0.5px solid rgb(237, 237, 237);
			}

			.kecheng h2 {
				font-size: 16px;
				font-weight: 700;
				padding-bottom: 20px;
			}

			.kecheng1 {
				font-size: 14px;
				color: rgb(153, 153, 153);
				position: absolute;
				top: 50%;
				left: 50px;
			}

			.kecheng img {
				position: absolute;
				top: 50%;
			}

			.huifang {
				padding: 16px;
				position: relative;
			}

			.huifang h2 {
				font-size: 16px;
				font-weight: 700;
				padding-bottom: 8px;
			}

			.huifang1 {
				margin-bottom: 16px;
			}

			.huifang1 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang1 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang2 {
				margin-bottom: 16px;
			}

			.huifang2 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang2 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang3 {
				margin-bottom: 16px;
			}

			.huifang3 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang3 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang4 {
				margin-bottom: 16px;
			}

			.huifang4 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang4 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang5 {
				margin-bottom: 16px;
			}

			.huifang5 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang5 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang6 {
				margin-bottom: 16px;
			}

			.huifang6 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang6 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang7 {
				margin-bottom: 16px;
			}

			.huifang7 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang7 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang8 {
				margin-bottom: 16px;
			}

			.huifang8 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang8 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang9 {
				margin-bottom: 16px;
			}

			.huifang9 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang9 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang10 {
				margin-bottom: 16px;
			}

			.huifang10 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang10 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang11 {
				margin-bottom: 16px;
			}

			.huifang11 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang11 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang12 {
				margin-bottom: 16px;
			}

			.huifang12 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang12 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang13 {
				margin-bottom: 16px;
			}

			.huifang13 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang13 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang14 {
				margin-bottom: 16px;
			}

			.huifang14 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang14 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang15 {
				margin-bottom: 16px;
			}

			.huifang15 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang15 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang16 {
				margin-bottom: 16px;
			}

			.huifang16 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang16 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang17 {
				margin-bottom: 16px;
			}

			.huifang17 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang17 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang18 {
				margin-bottom: 16px;
			}

			.huifang18 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang18 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang19 {
				margin-bottom: 16px;
			}

			.huifang19 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang19 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang20 {
				margin-bottom: 16px;
			}

			.huifang20 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang20 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang21 {
				margin-bottom: 16px;
			}

			.huifang21 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang21 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang22 {
				margin-bottom: 16px;
			}

			.huifang22 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang22 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang23 {
				margin-bottom: 16px;
			}

			.huifang23 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang23 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang24 {
				margin-bottom: 16px;
			}

			.huifang24 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang24 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang25 {
				margin-bottom: 16px;
			}

			.huifang25 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang25 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang26 {
				margin-bottom: 16px;
			}

			.huifang26 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang26 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang27 {
				margin-bottom: 16px;
			}

			.huifang27 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang27 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.huifang28 {
				margin-bottom: 16px;
			}

			.huifang28 p:nth-of-type(1) {
				font-size: 14px;
				font-weight: 700;
			}

			.huifang28 p:nth-of-type(2) {
				font-size: 12px;
				padding-left: 40px;
				color: rgb(153, 153, 153);

			}

			.bottom_nav {
				background-color: white;
				padding-top: 10px;
				height: 60px;
				border-top: 0.5px solid rgb(237, 237, 237);
				position: fixed;
				bottom: 0px;
				left: 0px;
				right: 0px;

			}

			.pinglun {
				padding-left: 12%;
				float: left;
				font-size: 12px;
				color: rgb(102, 102, 102);
				text-align: center;
			}

			.tousu {
				padding-left: 12%;
				float: left;
				font-size: 12px;
				color: rgb(102, 102, 102);
				text-align: center;
			}

			.tixing {
				padding-left: 12%;
				float: left;
				font-size: 12px;
				color: rgb(102, 102, 102);
				text-align: center;
				position: relative;
			}

			.xiangqing {
				padding-left: 12%;
				float: left;
				font-size: 12px;
				color: rgb(102, 102, 102);
				text-align: center;
			}

			.huifang a:link {

				text-decoration: none;
				color: rgb(153, 153, 153);
			}

			.huifang a:visited {

				color: rgb(153, 153, 153);
			}
			.pinglun p a:link{
				text-decoration: none;
				color:rgb(102, 102, 102) ;
			}
			.pinglun p a:visited{
				
				color:rgb(102, 102, 102) ;
			}
			.tousu p a:link{
				text-decoration: none;
				color:rgb(102, 102, 102) ;
			}
			.tousu p a:visited{
				
				color:rgb(102, 102, 102) ;
			}
			.xiangqing p a:link{
				text-decoration: none;
				color:rgb(102, 102, 102) ;
			}
			.xiangqing p a:visited{
				
				color:rgb(102, 102, 102) ;
			}
		</style>
		<script>
		var isKai = false;
		
		function huanTu(){
		  if(!isKai){
		    pic.src = "tixingk.png";
		    isKai = true;
		  }else{
		    pic.src = "tixingg.png";
		    isKai = false;
		  }
		}
		
		</script>
	</head>
	<body>


		<!-- 开始 -->
		<div class="video">
			<video controls>

				<source src="https://wx16.oss-cn-qingdao.aliyuncs.com/images/sd.mp4" controls>
			</video>
			<img width="20px" src="fanhui.png" />
			<div class="xuanxiang">
				<img width="20px" src="xuanxiang.png" />
			</div>
		</div>
		<!-- 结束 -->
		<div class="box">
			<div class="biaoti">
				<h1>张政老师的课堂</h1>
			</div>
			<div class="kecheng">
				<h2>当前课程</h2>
				<img src="bofang.png">
				<div class="kecheng1">
					<p>张政老师的课堂</p>
					<p>老师已下课</p>
				</div>
			</div>
			<!-- 结束 -->
			<div class="huifang">
				<h2>历史回放</h2>
				<div class="huifang1">
					<p>103. 项目</p>
					<p><a href="video_smj3.html">2020-06-24 15:36 共270分钟</a></p>

				</div>
				<div class="huifang2">
					<p>102. js2</p>
					<p><a href="video_smj3.html">2020-06-24 14:08 共60分钟</a></p>
				</div>
				<div class="huifang3">
					<p>101. PHP简介</p>
					<p><a href="video_smj3.html">2020-06-24 09:35 共60分钟</a></p>
				</div>
				<div class="huifang4">
					<p>100. js1</p>
					<p><a href="video_smj3.html">2020-06-23 15:47 共62分钟</a></p>
				</div>
				<div class="huifang5">
					<p>99. js1</p>
					<p><a href="video_smj3.html">2020-06-23 14:12 共59分钟</a></p>
				</div>
				<div class="huifang6">
					<p>98. 项目</p>
					<p><a href="video_smj3.html">2020-06-22 17:05 共64分钟</a></p>
				</div>
				<div class="huifang7">
					<p>97. 项目</p>
					<p><a href="video_smj3.html">020-06-22 16:06 共49分钟</a></p>
				</div>
				<div class="huifang8">
					<p>96. 项目</p>
					<p><a href="video_smj3.html">2020-06-22 14:19 共45分钟</a></p>
				</div>
				<div class="huifang9">
					<p>95. 项目</p>
					<p><a href="video_smj3.html">2020-06-19 17:50 共30分钟</a></p>
				</div>
				<div class="huifang10">
					<p>94. 定位</p>
					<p><a href="video_smj3.html">2020-06-19 15:53 共71分钟</a></p>
				</div>
				<div class="huifang11">
					<p>93. 定位</p>
					<p><a href="video_smj3.html">2020-06-19 14:11 共74分钟</a></p>
				</div>
				<div class="huifang12">
					<p>92. 动画</p>
					<p><a href="video_smj3.html">2020-06-18 15:57 共75分钟</a></p>
				</div>
				<div class="huifang13">
					<p>91. 动画</p>
					<p><a href="video_smj3.html">2020-06-18 14:08 共77分钟</a></p>
				</div>
				<div class="huifang14">
					<p>90. 动画</p>
					<p><a href="video_smj3.html">2020-06-17 17:51 共152分钟</a></p>
				</div>
				<div class="huifang15">
					<p>89. 动画</p>
					<p><a href="video_smj3.html">2020-06-17 15:53 共72分钟</a></p>
				</div>
				<div class="huifang16">
					<p>88. 动画</p>
					<p><a href="video_smj3.html">2020-06-17 14:15 共49分钟</a></p>
				</div>
				<div class="huifang17">
					<p>87. 浮动</p>
					<p><a href="video_smj3.html">2020-06-16 16:30 共117分钟</a></p>
				</div>
				<div class="huifang18">
					<p>86. 浮动</p>
					<p><a href="video_smj3.html">2020-06-16 15:33 共37分钟</a></p>
				</div>
				<div class="huifang19">
					<p>85. 浮动</p>
					<p><a href="video_smj3.html">2020-06-16 14:10 共61分钟</a></p>
				</div>
				<div class="huifang20">
					<p>84. 浮动</p>
					<p><a href="video_smj3.html">2020-06-15 16:41 共77分钟</a></p>
				</div>
				<div class="huifang21">
					<p>83. 浮动</p>
					<p><a href="video_smj3.html">2020-06-15 15:25 共50分钟</a></p>
				</div>
				<div class="huifang22">
					<p>82. 浮动</p>
					<p><a href="video_smj3.html">2020-06-15 14:20 共48分钟</a></p>
				</div>
				<div class="huifang23">
					<p>81. 浮动</p>
					<p><a href="video_smj3.html">2020-06-13 17:13 共52分钟</a></p>
				</div>
				<div class="huifang24">
					<p>80. 浮动2</p>
					<p><a href="video_smj3.html">2020-06-13 16:31 共20分钟</a></p>
				</div>
				<div class="huifang25">
					<p>79. 浮动2</p>
					<p><a href="video_smj3.html">2020-06-13 14:07 共63分钟</a></p>
				</div>
				<div class="huifang26">
					<p>78. 浮动</p>
					<p><a href="video_smj3.html">2020-06-12 15:55 共96分钟</a></p>
				</div>
				<div class="huifang27">
					<p>77. 盒子模型</p>
					<p><a href="video_smj3.html">2020-06-12 14:33 共60分钟</a></p>
				</div>
				<div class="huifang28">
					<p>76. 盒子模型</p>
					<p><a href="video_smj3.html">2020-06-11 17:14 共60分钟</a></p>
				</div>
			</div>
			<!-- 结束 -->
			<div class="bottom_nav">
				<div class="pinglun">
					<div><a href="video_smj4.html"><img src="pinglun.png"></a></div>
					<p><a href="video_smj4.html">评论</a></p>
				</div>
				<div class="tousu">
					<div><a href="video_smj5.html"><img src="tousu.png"></a></div>
					<p><a href="video_smj5.html">投诉</a></p>
				</div>
				<div class="tixing">

					<img id="pic" onclick="huanTu()" src="tixingk.png" />
					<p id="wenzi" onclick="huanZi()" >提醒已开</p>
					
							
				</div>
				<div class="xiangqing">
					<div><a href="video_smj6.html"><img src="xiangqing.png"></a></div>
					<p><a href="video_smj6.html">查看详情</a></p>
				</div>
			</div>
			<!-- 结束 -->
		</div>
		
	</body>
</html>
